<template>
    <div>
        <el-form
            :model="form"
            :inline="true"
            :disabled="!isUpData"
            ref="form"
            label-width="100px"
            size="small"
        >
            <el-row
                v-for="(item, index) in form.copyList"
                :key="index"
                v-if="item.accountChannel === accountChannel"
            >
                <el-form-item
                    label="商户号"
                    :prop="'copyList.' + index + '.merchantNumber'"
                    :rules="[
                        {
                            required: true,
                            message: '不能为空',
                            trigger: 'blur',
                        },
                    ]"
                >
                    <el-input
                        v-model="item.merchantNumber"
                        class="item"
                        placeholder="请输入"
                    />
                </el-form-item>
                <el-form-item
                    label="线上比例"
                    label-width="80px"
                    :prop="'copyList.' + index + '.upRatio'"
                    :rules="moreRules.upRatio"
                >
                    <el-input
                        class="item"
                        v-model.number="item.upRatio"
                        @focus="
                            (event) => {
                                event.currentTarget.select()
                            }
                        "
                        autocomplete="off"
                        placeholder="请输入比例"
                    />%
                </el-form-item>
                <el-form-item
                    label="线下比例"
                    label-width="80px"
                    :prop="'copyList.' + index + '.downRatio'"
                    :rules="moreRules.downRatio"
                >
                    <el-input
                        class="item"
                        v-model.number="item.downRatio"
                        @focus="
                            (event) => {
                                event.currentTarget.select()
                            }
                        "
                        autocomplete="off"
                        placeholder="请输入比例"
                    />%
                </el-form-item>
                <el-form-item
                    label="日收款金额限制"
                    label-width="110px"
                    :prop="'copyList.' + index + '.dayReceivePaymentLimit'"
                >
                    <input-m
                        ref="currMoney"
                        :word.sync="item.dayReceivePaymentLimit"
                        class="item"
                        placeholder="不填则不限制"
                        @focus="
                            (event) => {
                                event.currentTarget.select()
                            }
                        "
                    ></input-m>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        v-if="index == 0"
                        size="mini"
                        @click="addRow"
                        >添加</el-button
                    >
                    <el-button
                        type="danger"
                        v-if="form.copyList.length > 1"
                        v-show="index !== 0"
                        size="mini"
                        @click="removeRow(index)"
                        >删除</el-button
                    >
                </el-form-item>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
    props: ['netPayInfo', 'sourceList', 'accountChannel'],
    data () {
        return {
            form: {
                copyList: []
            },
            // 新增表单的验证规则
            moreRules: {
                upRatio: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            let re = /(^[0-9]\d{0,3}$)|(^\.\d{1,2}$)|(^[0-9]\d{0,3}\.\d{1,2}$)/
                            if (value === '') {
                                callback(new Error('不能为空'))
                            } else if (!re.test(value)) {
                                callback(new Error('请输入数字且最多两位小数'))
                            } else if (value < 0 || value > 100) {
                                callback(new Error('请输入0~100之间的数字'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'change'
                    }
                ],
                downRatio: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            let re = /(^[0-9]\d{0,3}$)|(^\.\d{1,2}$)|(^[0-9]\d{0,3}\.\d{1,2}$)/
                            if (value === '') {
                                callback(new Error('不能为空'))
                            } else if (!re.test(value)) {
                                callback(new Error('请输入数字且最多两位小数'))
                            } else if (value < 0 || value > 100) {
                                callback(new Error('请输入0~100之间的数字'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    watch: {
        'netPayInfo': {
            handler: function (newValue, oldValue) {
                // this.form.copyList = newValue.accountList
                this.form.copyList = newValue.accountList.filter(item => item.accountChannel === this.accountChannel)
                console.log(this.form.copyList)
            },
            deep: true
        },
        'accountChannel': {
            handler: function (newValue, oldValue) {
                this.form.copyList = this.netPayInfo.accountList.filter(item => item.accountChannel === this.accountChannel)
            },
            deep: true
        }
    },
    computed: {
        isUpData () {
            return this.$store.state.isUpData
        }
    },
    methods: {
        addRow () {
            console.log(this.form.copyList)
            this.netPayInfo.accountList.push(
                { merchantNumber: '', rowId: new Date().getTime(), accountChannel: this.accountChannel, upRatio: 100, downRatio: 100, dayReceivePaymentLimit: null }
            )
        },
        // 删除属性列
        removeRow (index) {
            console.log(this.form.copyList[index])
            this.netPayInfo.accountList.splice(this.netPayInfo.accountList.indexOf(this.form.copyList[index]), 1)
            // this.form.copyList.splice(index, 1)
        },
        // 提交
        submit (formName) {
            let check = false
            this.$refs[formName].validate(valid => {
                if (valid) {
                    check = true
                    this.$emit('update:copyList', this.form.copyList)
                } else {
                    this.$message({
                        showClose: true,
                        message: '请完善配置',
                        type: 'error'
                    })
                    check = false
                }
            })
            return check
        }
    }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.item
    width: 150px
</style>